import React,{useEffect, useState} from "react";
import Taro from "@tarojs/taro";
import {Input, View} from "@tarojs/components";
import './index.less';

export default function YiCode(props) {
	const [code, setCode] = useState([]);
	
	const config = {
		size: props.size || 6,
		isFocus: props.isFocus === undefined ? true : props.isFocus,
		type: props.type || 'pane',
		inputType: props.inputType || 'number'
	}
	
	const inputChange = (val) => {
		props.onConfirm(val)
	}
	
	useEffect(() => {
		setCode(props?.value?.toString().split('') || []);
	}, [props.value])
	
	return <View className='page-yi-code'>
		<View className='showInput'>
			{Array.from(new Array(config.size).keys()).map((i) => {
				return <View className={`inputBox ${config.type == 'pane'?'pane':'line'}`}>
					<Input disabled={true} value={code[i] || ''} key={i} className='input' style={props.inputStyle} type={config.inputType} maxlength={1}/>
					{code.length === i && <View className='active' style={props.activeStyle} />}
				</View>
			})}
		</View>
		<Input className='hideInput' style={{ height: props.inputStyle && props.inputStyle.height ? props.inputStyle.height: '80rpx',fontSize:0 }} value={props.value} type={config.inputType} onInput={(e) => inputChange(e.detail.value)} maxlength={config.size} focus={config.isFocus}/>
	</View>
}